﻿    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地理编码</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=eef7f290ac06bdf05b246cebc8cb2fb6&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
    	.chax_input {
		    display: inline-block;
		    border: 1px solid #DDDDDD;
		    height: 32px;
		    line-height: 32px;
		    padding: 0 10px;
		    margin-left: 20px;
		}
		select{
			 display: inline-block;
		    border: 1px solid #DDDDDD;
		    height: 32px;
		    line-height: 32px;
		    padding: 0 10px;
		}
		.zizh_btn {
		    background: #FF7831;
		    color: white;
		    border: 0;
		    cursor: pointer;
		    width: 120px;
		    border-radius: 2px;
		    font-size: 14px;
		    height: 32px;
		    margin-left: 13px; display: inline-block;
		}
		.city-picker-select{padding: 30px 20px 15px;}
		.city-picker-select select{margin-right: 15px;}
		.index_bottom{display: none;}
		#tip{right: 0; top: 15px; border: 0; padding-left: 20px; font-size: 14px;}
    </style>
</head>
<body onload="geocoder()">
<div class="city-picker-select"></div>	
<input type="text" class="chax_input" placeholder="请输入具体位置" id='cut_address' />
<input type="button" value="获取位置" class="zizh_btn" id='get_address'/>
<input type="button" value="保存" class="zizh_btn" id='save_btn'/>	
<div id="container" style="width: 95%;height: 62%;margin-top: 17.5%; margin-left: 20px;"></div>
<div id="tip" style="position: relative;">
    <span id="result"></span>
</div>
<input type="hidden" id="address_info"  value="{$agent_info['address']}"/>
{include file="public/footer" /}
<script type="text/javascript" src="__PUBLIC__/static/js/citydata.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/cityPicker-1.1.4.js"></script>
<script type="text/javascript">
	var lng='';
	var lat=''
	//原生城市-无联动
	var select = $('.city-picker-select').cityPicker({
		dataJson: cityData,
		renderMode: false,
		autoSelected: true
	});

	//设置城市
	select.setCityVal([{
				'id': '110000',
				'name': '北京市'
			}, {
				'id': '110100',
				'name': '北京市'
			}, {
				'id': '110108',
				'name': '海淀区'
			}]);
	console.log(select.getCityVal())
		
	
    var map = new AMap.Map("container", {
      	zoom: 16,
        resizeEnable: true
    });
    function geocoder() {
        var geocoder = new AMap.Geocoder({
             //城市，默认：“全国”
            radius: 500 //范围，默认：500
        });
        //地理编码,返回地理编码结果
        geocoder.getLocation($('#address_info').val(), function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });
    }
    function addMarker(i, d) {
        var marker = new AMap.Marker({
            map: map,
            position: [ d.location.getLng(),  d.location.getLat()]
        });
        var infoWindow = new AMap.InfoWindow({
            content: d.formattedAddress,
            offset: {x: 0, y: -30}
        });
        marker.on("mouseover", function(e) {
            infoWindow.open(map, marker.getPosition());
        });
    }
    //地理编码返回结果展示
    function geocoder_CallBack(data) {
        var resultStr = "";
        //地理编码结果数组
        var geocode = data.geocodes;
        for (var i = 0; i < geocode.length; i++) {
            //拼接输出html
            lng=geocode[i].location.getLng();
            lat=geocode[i].location.getLat();
            resultStr += "<span style=\"padding:0px 0 4px 2px;\">" + "<b>地址</b>：" + geocode[i].formattedAddress + "" + "&nbsp;&nbsp;<b>的地理编码结果是:</b><b>&nbsp;&nbsp;&nbsp;&nbsp;坐标</b>：" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "<b>&nbsp;&nbsp;&nbsp;&nbsp;匹配级别</b>：" + geocode[i].level + "</span>";
            addMarker(i, geocode[i]);
        }
        map.setFitView();
        document.getElementById("result").innerHTML = resultStr;
    }
    
    $('#get_address').click(function(){
    	if($('#cut_address').val()==""){
    		layer.msg("请输入地址");
    		return;
    	}
    	address_info = select.getCityVal()[0].name+select.getCityVal()[1].name+select.getCityVal()[2].name;
    	$('#address_info').val(address_info+$('#cut_address').val());
    	
    	map = new AMap.Map("container", {
	      	zoom: 16,
	        resizeEnable: false
	    });
    	
    	geocoder();
    })
    $('#save_btn').click(function(){
    	
    	var a = $('#address_info').val();
    	if($('#cut_address').val()==""){
    		layer.msg('请先填写地址获取坐标!!!');
    		return;
    	}
    		$.ajax({
				url: "edit_address",
				type:"post",
				data: {
					lat: lat,
					lng: lng,
					address:$('#address_info').val()
				},
				success: function(data) {
					layer.msg(data.msg, {
					  icon: 1,
					  time: 1500 //2秒关闭（如果不配置，默认是3秒）
					}, function(){
						parent.location.reload();
					});
				}
			})

    })
</script>
